import React, { useState, useEffect } from "react";
import { connect } from "dva";
import { Input, Spin, Modal, Icon, Form, Row, Col, Radio } from "antd";
import styles from "./index.less";
import { message } from "antd/lib/index";

const AddGroup = ({ visible, dispatch, form, editGroup }) => {
	const [loading, setLoading] = useState();
	const formItemLayout = {
		labelCol: {
			xs: { span: 24 },
			sm: { span: 6 },
		},
		wrapperCol: {
			xs: { span: 24 },
			sm: { span: 18 },
		},
	};
	const tailFormItemLayout = {
		wrapperCol: {
			xs: {
				span: 24,
				offset: 0,
			},
			sm: {
				span: 16,
				offset: 8,
			},
		},
	};
	const hide = () => {
		dispatch({
			type: "singleSkillSet/showAddGroup",
			payload: {
				visible: false,
				editGroup: null,
			},
		});
	};

	const { getFieldDecorator } = form;

	const handleSubmit = (e) => {
		e.preventDefault();
		form.validateFields((err, values) => {
			if (!err) {
				setLoading(true);
				dispatch({
					type: "singleSkillSet/addGroup",
					payload: {
						...values,
						id: editGroup?.id,
					},
					callback: (res) => {
						if (res.code == -1) {
							setLoading(false);
							return false;
						}
						setLoading(false);
						hide();
						message.success("操作完成");
					},
				});
			}
		});
	};

	useEffect(() => {
		if (editGroup) {
			form.setFieldsValue({
				groupName: editGroup.groupName,
			});
		}
	}, [editGroup]);

	return (
		<Modal
			title='添加/编辑工单技能组'
			visible={visible}
			onCancel={hide}
			onOk={handleSubmit}
			okButtonProps={{ loading }}
			destroyOnClose>
			<Form {...formItemLayout}>
				<Form.Item label='技能组名称'>
					{getFieldDecorator("groupName", {
						rules: [
							{
								required: true,
								message: "请输入技能组名称",
							},
						],
					})(<Input />)}
				</Form.Item>
			</Form>
		</Modal>
	);
};
export default connect(({ singleSkillSet }) => ({
	...singleSkillSet,
}))(Form.create()(AddGroup));
